<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/cart.css">
    <link rel="stylesheet" href="../css/weibu.css">
    <link rel="stylesheet" href="../css/cebianlan.css">
    <script src="../js/jquery-3.6.0.js"></script>

    <style>
        header {
            height: 30px;
            line-height: 30px;
            background-color: #eee;
        }


        .header-right {
            position: relative;
            margin: auto;
            width: 1200px;
            height: 30px;
            z-index: 1;
        }

        /* 一级 */
        .nav {
            width: 1200px;
            height: 30px;
            background-color: #eee;
            margin: auto;
        }

        .nav-left {
            float: left;
            width: 183px;
            height: 30px;
            margin-left: 10px;
            line-height: 30px;
        }

        .city {
            box-sizing: border-box;
            height: 31px;
            float: left;
            padding: 0px 7px;
            z-index: 5;
            position: relative;
        }

        .city>img {
            float: left;
            width: 20px;
            height: 30px;
        }

        .city>p {
            float: left;
        }

        .enter {
            float: left;
            color: red;
            padding: 0px 12px;
        }

        .login:hover {
            color: red;
        }

        .nav-right {
            float: right;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 374px;
            height: 30px;
        }

        .nav-right>li {
            margin-right: 5px;
        }

        .my {
            height: 30px;
            line-height: 30px;
            padding: 0px 5px;
        }

        .nav-right>li>a {
            color: #8c8c8c;
        }

        .nav-right>li>a:hover {
            color: red;
        }

        .nav-right>li>a>span {
            color: #555;
            margin-right: 5px;
        }

        .spacer {
            width: 1px;
            height: 10px;
            background-color: #ccc;
        }

        .last {
            position: relative;
            margin-top: 2px;
            z-index: 5;
        }

        /* 二级 */
        .two {
            position: absolute;
            left: 10px;
            top: 30px;
            width: 443px;
            height: 236px;
            background-color: #fff;
            border: 1px solid #ccc;
            display: none;
            z-index: 3;
        }

        .layer {
            box-sizing: border-box;
            position: absolute;
            top: 30px;
            right: 5px;
            width: 380px;
            height: 150px;
            background-color: #fff;
            border: 1px solid #ccc;
            padding: 20px;
            display: none;
            z-index: 3;
        }

        .layer-left {
            float: left;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            width: 85px;
            height: 110px;
            border-right: 1px solid rgb(235, 233, 233);
        }

        .layer-left>div {
            font-weight: 700;
            color: #777;
        }

        .layer-left>p>a,
        .layer-right>p>a {
            color: #8c8c8c;
        }

        .layer-right {
            float: right;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            width: 225px;
            height: 110px;
        }

        .layer-right>div {
            width: 225px;
            height: 20px;
            font-weight: 700;
            color: #777;
        }

        .layer-right>p {
            height: 20px;
            width: 70px;
        }

        .layer a:hover {
            color: red;
        }

        .header-cart {
            border-bottom: 2px solid #f42424;
            margin-bottom: 16px;
        }

        .header-cart-box {
            width: 1200px;
            height: 100px;
            margin: auto;
            display: flex;
            justify-content: space-between;
        }

        .cart-log {
            width: 289px;
            height: 100px;
            float: left;

        }

        .titit {
            float: left;
            font-size: 18px;
            color: #8c8c8c;
            margin-top: 36px;
        }

        .cart-log-img {
            float: left;
        }

        .searchForm {
            float: left;
            margin: 30px 0 0 78px;
            width: 546px;
            position: relative;
        }

        .texxxxt {
            border-width: 1px;
            padding: 9px 8px;
            width: 332px;
            height: 14px;
            padding: 8px;
            border: 2px solid #f42424;
            outline: 0;
            font-size: 12px;
            float: left;
            color: #999;
            margin-left: 10px;
        }

        .fooot {
            float: left;
        }

        .hahahha {
            border: 0;
            width: 70px;
            height: 34px;
            line-height: 34px;
            background-color: #f42424;
            color: #fff;
            font-size: 14px;
            cursor: pointer;
            float: left;
            outline: 0;
        }

        .hahahha>i {
            display: inline-block;
            width: 20px;
            height: 20px;
            background: url(https://x.dscmall.cn/themes/ecmoban_dsc2017/images/search.png) no-repeat;
            margin-top: 7px;
        }

        .zuizizi {
            width: 1200px;
            margin: 0 auto;
            background-color: #fff;

        }

        .emme {
            height: 174px;
            padding: 63px 0;
        }

        .mees {
            padding-left: 490px;
            height: 174px;
            background: url(https://x.dscmall.cn/themes/ecmoban_dsc2017/images/no-login-icon.png) 177px 0 no-repeat;
        }

        .teeeee {
            font-size: 24px;
            font-weight: bold;
            color: #8c8c8c;
            padding-top: 35px;
        }

        .foeef {
            overflow: hidden;
            margin-top: 25px;
        }

        .hadaaa {
            width: 138px;
            height: 38px;
            line-height: 38px;
            padding: 0;
            margin: 0;
            text-align: center;
            display: block;
            float: left;
            color: #fff;
            font-size: 14px;
            background: #f42424;
            border-color: #f42424;


            color: #fff;
        }

        .tqtq {
            line-height: 40px;
            margin-left: 25px;
            color: #2e7ad6;
            cursor: pointer;
            font-size: 14px;
        }

        .buuuu {
            margin: 50px auto 0;
            width: 1200px;
            height: 311px;
            /* border: 1px solid; */
        }

        .zuidadada {
            background-color: #eee;
        }

        .clearfix {
            width: 1px;
            height: 1px;
        }
    </style>
</head>

<body>

    <header>
        <div class="header-right">
            <!-- 二级导航 -->
            <div class="nav">
                <div class="nav-left">
                    <div class="city">
                        <img src="../mockcss/dingwei.svg" alt="">
                        <p>郑州市</p>
                    </div>
                    <p class="two">

                    </p>
                    <a href="" class="enter">请登录</a>
                    <a href="" class="login">免费注册</a>
                </div>
                <ul class="nav-right">
                    <li class="my">
                        <a href="">我的订单</a>
                    </li>
                    <li class="spacer"></li>
                    <li class="my">
                        <a href="">我的浏览</a>
                    </li>
                    <li class="spacer"></li>
                    <li class="my">
                        <a href="">我的收藏</a>
                    </li>
                    <li class="spacer"></li>
                    <li class="my">
                        <a href="">客户服务</a>
                    </li>
                    <li class="spacer"></li>
                    <li class="my last">
                        <a href="">
                            <span>网站导航</span>
                            <img src="../mockcss/jiantou.svg" alt="">
                        </a>
                    </li>
                    <div class="layer">
                        <div class="layer-left">
                            <div>特色主题</div>
                            <p><a href="">家用电器</a></p>
                            <p><a href="">男装女装</a></p>
                            <p><a href="">鞋靴箱包</a></p>
                        </div>
                        <div class="layer-right">
                            <div>促销活动</div>
                            <p> <a href="">拍卖活动</a> </p>
                            <p> <a href="">共创商品</a> </p>
                            <p> <a href="">积分商城</a> </p>
                            <p> <a href="">CMS频道</a> </p>
                            <p> <a href="">优惠活动</a> </p>
                            <p> <a href="">超值礼包</a> </p>
                            <p> <a href="">优惠券</a> </p>
                            <p> <a href="">礼品卡</a> </p>
                            <p> <a href="">预售商品</a> </p>
                        </div>
                    </div>
                </ul>
            </div>
        </div>
    </header>
    <div class="header-cart">
        <div class="header-cart-box">
            <div class="cart-log">
                <div class="cart-log-img">
                    <img src="https://x.dscmall.cn/storage/images/common/shop_logo.gif" alt=""
                        style="margin-top:30px ;">
                </div>
                <div class="titit">
                    购物车(<span class="buy-num">0</span>
                    )
                </div>
            </div>
            <div class="searchForm">
                <div class="fooot">
                    <form action="">
                        <input type="text" class="texxxxt">
                        <button class="hahahha">
                            <i></i>
                        </button>
                    </form>
                </div>
            </div>
        </div>

    </div>
    <div class="zuidadada">
        <div class="zuizizi">
            <!-- <div class="emme">
                <div class="mees">
                    <div class="teeeee">
                        购物车快饿瘪了，主人快给我挑点宝贝吧
                    </div>
                    <div class="foeef">
                        <a href="" class="hadaaa">马上去逛逛</a>
                        <a href="#" class="tqtq">去登录</a>
                    </div>
                </div>
            </div> -->
            <div class="cart-wrap">
                <!-- 购物车头部 -->
                <div class="cart-header">
                    <ul class="cart-lists">
                        <li class="cart-check">
                            <input type="checkbox" id="whole" class="whole-check">
                            <label for="whole" class=""></label><span>&nbsp;全选</span>
                        </li>
                        <li class="cart-con">商品</li>
                        <li class="cart-price">单价(元)</li>
                        <li class="cart-amount">数量</li>
                        <li class="cart-sum">小计</li>
                        <li class="cart-option">操作</li>
                    </ul>
                </div>
                <!-- 第一个店铺 -->
                <!-- 购物车列表内容 -->
                <div class="cart-box">
                    <div class="shop-info">
                        <div class="all-check fl">
                            <!-- 商铺的全选 -->
                            <input type="checkbox" id="showall1" class="shop-check">
                            <label for="showall1"></label>

                        </div>
                        <div class="shop-txt_1">
                            <a href="#" class="aaaaaaaaa">商创自营</a>
                        </div>
                        <div class="shop-name"><a href="">商城自营1</a></div>
                    </div>
                    <!-- 购物车列表内容 -->
                    <div class="cart-content">
                        <ul class="cart-lists">
                            <li class="cart-check">
                                <input type="checkbox" id="check1" class="son-check">
                                <label for="check1"></label>
                            </li>
                            <li class="cart-con">
                                <div class="cart-img">
                                    <a href=""><img
                                            src="https://x.dscmall.cn/storage/images/201703/goods_img/0_P_1490174791824.jpg"
                                            alt=""></a>
                                </div>
                                <div class="cart-text fs12">
                                    LG17年春夏新款百搭半身裙蛋糕裙 a字裙 裤裙伞裙大码裙子超短裙女 松紧腰围 带裤边打底衬 涤针织面料</div>
                            </li>
                            <li class="cart-price">
                                <p class="price">10</p>
                            </li>
                            <li class="cart-amount">
                                <div class="amount-box">
                                    <button class="reduce" disabled>-</button>
                                    <input type="text" value="1">
                                    <button class="add">+</button>
                                </div>
                            </li>
                            <li class="cart-sum">
                                <p class="price-sum">10</p>
                            </li>
                            <li class="cart-option">
                                <div class="cart-dele">删除</div>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- 总价 -->
                <div class="cart-footer">
                    <div class="qwer">
                        <ul class="cart-lists">
                            <li class="cart-check">
                                <input type="checkbox" id="whole" class="whole-check">
                                <label for="whole" class=""></label><span>&nbsp;全选</span>
                            </li>
                            <div class="heiheiehie">
                                <li class="cart-option shanshan">
                                    <div class="cart-dele cscs">删除选中的商品</div>
                                </li>
                                <li>移入我的收藏</li>
                            </div>
                        </ul>
                    </div>
                    <div class="qweee">
                        <div class="jaja">已选择<span class="buy-num">0</span>件商品</div>
                        <div class="nnnnn">已节省：<span class="heie">¥0.00</span></div>
                        <div class="zongzong"><span class="zong_1111">总价(不含运费):￥</span>
                            <span></span><span class="pay-price">0</span>
                            <a href="./dengluww.html" class="zhifufuf">
                                去支付
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 模态框 -->
            <div class="modal-bg"></div>
            <div class="modal-box">
                <h2>提示</h2>
                <p>亲,您确定要放弃该宝贝吗？</p>
                <div class="btn">
                    <button class="ok">确定</button>
                    <button class="close">取消</button>
                </div>
            </div>
        </div>
        <div class="buuuu">
            <div class="ftit">
                <h3>猜你喜欢</h3>
            </div>
            <div class="bhg">
                <ul class="uytut">
                    <li>
                        <div class="pp-img">
                            <img src="https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489108266095.jpg"
                                alt="">
                        </div>
                    </li>
                    <li>
                        <div class="pp-img">
                            <img src="https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490174791219.jpg"
                                width="190px" alt="">
                        </div>
                    </li>
                    <li>
                        <div class="pp-img">
                            <img src="https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490174342632.jpg
                            " alt="">
                        </div>
                    </li>
                    <li>
                        <div class="pp-img">
                            <img src="https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490169118213.jpg"
                                alt="">
                        </div>
                    </li>
                    <li>
                        <div class="pp-img">
                            <img src="	https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490174791219.jpg"
                                alt="">
                        </div>
                    </li>
                    <li>
                        <div class="pp-img">
                            <img src="https://x.dscmall.cn/storage/images/201809/thumb_img/0_thumb_G_1536606976503.jpg"
                                alt="">
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <footer class="footer_new">
        <footer class="footer_new_top">
            <div class="width_1200">
                <div class="width_left">
                    <div class="width_180">
                        <i class="icio_qi"></i>
                        <span>七天包换</span>
                    </div>
                    <div class="width_180">
                        <i class="icio_zheng"></i>
                        <span>正品保证</span>
                    </div>
                    <div class="width_180">
                        <i class="icio_hao"></i>
                        <span>好品如潮</span>
                    </div>
                    <div class="width_180">
                        <i class="icio_huo"></i>
                        <span>正品发货</span>
                    </div>
                    <div class="width_180">
                        <i class="icio_quan"></i>
                        <span>权威荣誉</span>
                    </div>
                </div>
                <div class="width_right">
                    <div class="contact_item_180">
                        <i class="icio_tel"></i>
                        <span>4001-021-758</span>
                    </div>
                    <div class="contact_item_115">
                        <i class="icio_kefu"></i>
                        <span>资讯客服</span>
                    </div>
                </div>
            </div>
        </footer>
        <div class="footer_new_con">
            <div class="wrap_1200">
                <div class="help_list">
                    <ul class="help_ul">
                        <li>
                            <p>
                                新手上路
                            </p>
                        </li>
                        <li>售后流程</li>
                        <li>购物流程</li>
                        <li>订购方式</li>
                    </ul>
                    <ul class="help_ul">
                        <li>
                            <p>
                                配送与支付
                            </p>
                        </li>
                        <li> 货到付款区域</li>
                        <li>配送支付智能查询</li>
                        <li>支付方式说明</li>
                    </ul>
                    <ul class="help_ul">
                        <li>
                            <p>
                                服务保证
                            </p>
                        </li>
                        <li>退换货原则</li>
                        <li>售后服务保证</li>
                        <li>产品质量保证</li>
                    </ul>
                    <ul class="help_ul">
                        <li>
                            <p>
                                联系我们
                            </p>
                        </li>
                        <li>网站故障报告</li>
                        <li>选机咨询</li>
                        <li>投诉与建议</li>
                    </ul>
                    <ul class="help_ul">
                        <li>
                            <p>
                                会员中心
                            </p>
                        </li>
                        <li>资金管理</li>
                        <li>我的收藏</li>
                        <li>我的订单</li>
                    </ul>
                </div>
                <div class="help_right">
                    <div class="help_le">
                        <img src="	https://x.dscmall.cn/storage/images/common/ecjia_qrcode.jpg" alt="">
                        <div class="guan">关注微信</div>
                    </div>
                    <div class="help_le">
                        <img src="	https://x.dscmall.cn/storage/images/common/ectouch_qrcode.jpg?gnWeyT" alt="">
                        <div class="guan">关注APP下载</div>
                    </div>
                </div>
            </div>
            <div class="whi_w">
                <p>
                    <a href="">首页</a>
                    <span>|</span>
                    <a href="">隐私保护</a>
                    <span>|</span>
                    <a href="">联系我们</a>
                    <span>|</span>
                    <a href=""> 免责条款</a>
                    <span>|</span>
                    <a href="">公司简介</a>
                    <span>|</span>
                    <a href="">商家入驻</a>
                    <span>|</span>
                    <a href="">供应商入驻</a>
                    <span>|</span>
                    <a href="">意见反馈</a>
                </p>
                <p>
                    <a href="">b2b2c</a>
                    <span>|</span>
                    <a href="">多用户商城系统</a>
                    <span>|</span>
                    <a href="">商城系统</a>
                    <span>|</span>
                    <a href="">ecjia新零售</a>
                </p>
                <p>ICP备案证书号:<span>沪ICP备14029880号-5</span></p>
                <p>版权所有 © 2005-2021 大商创，并保留所有权利。POWERED BY DSCMALL</p>
            </div>
        </div>
    </footer>

    <!-- qq登录页面 -->
    <div class="i_avatar_box">
        <div class="i_write">
            <div class="pb-hd">
                <span>您尚未登录！</span>
                <a href="javascript:;" class="xiaoshi">X</a>
            </div>
            <div class="pb-bd">
                <div class="login-form">
                    <p class="p1">
                        <span> 用第三方账号直接登录</span>
                        <span></span>
                    </p>
                    <p class="p2">
                        <a href="javascrpit:;"><b class="iconfont icon-QQ1"></b></a>
                    </p>
                </div>
                <div class="login-box">
                    <p class="p1">
                        <span> 账号登录</span>
                        <span></span>
                    </p>
                    <div class="form">
                        <div class="item">
                            <i class="wn"></i>
                            <input type="text" placeholder="用户名/邮箱/手机">
                        </div>
                        <div class="item ">
                            <i class="wn1"></i>
                            <input type="text" placeholder="密码">
                        </div>
                        <div class="item tiem-a">
                            <i class="wn2"></i>
                            <input type="text" placeholder="验证码">
                            <img src="https://x.dscmall.cn/captcha_verify.php?captcha=is_login&77467537" alt=""
                                class="suiji">
                        </div>
                        <div class="iem">
                            <input type="checkbox">
                            请保存我这次的登录信息。
                        </div>
                        <div class="iem1 item">登录</div>
                        <div class="iem2">
                            <a href="javascript:;">忘记密码？</a>
                            <a href="javascript:;">免费注册</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>

        // 全选
        // 点击全部的全选更改input和label
        // whole 所有的input
        $("#whole").change(function (e) {
            //把所有的input选中状态变为自己的状态
            $("input").prop('checked', $(this).prop('checked'));
            if ($(this).prop('checked')) {
                // active 活性颜色
                // label 小方块
                $("label").addClass('active');
            } else {
                $("label").removeClass('active');
            }
            // Father();
        });
        // 店铺自营点击事件 选择全部子元素
        // all - check 全选下面的input change事件

        //parents 把所有的input选中状态变为自己的状态

        //parents 返回元素的祖先元素
        //find 返回元素中匹配选择器的后代元素
        // prop 设置属性
        // next返回后面直接的兄弟元素

        // cart-box 店铺内容
        // cart-check 小按钮的父盒子
        $(".all-check input").change(function () {

            $(this).parents(".cart-box").find(".cart-check>input").prop("checked", $(this).prop('checked'));
            console.log($(this).prop('checked'));

            if ($(this).prop('checked')) {
                $(this).parents(".cart-box").find(".cart-check>label").addClass('active');
            } else {
                $(this).parents(".cart-box").find(".cart-check>label").removeClass('active');
            }
            Father();
        });

        // 店铺下面的选中
        $("input").on("change", function (e) {
            if ($(this).prop('checked')) {
                $(this).next().addClass("active");
            } else {
                $(this).next().removeClass("active");
            }
            Father();

        });


        // 加号
        $(".add").click(function (e) {
            //数字增加
            // val value
            //prev 返回前面直接的兄弟元素
            $(this).prev().val(Number($(this).prev().val()) + 1);
            // console.log($(this).prev());
            //加号可以点击

            $(this).prev().prev().removeAttr("disabled");
            //重新计算
            anew.call($(this).prev().get(0));
        });
        // 减号
        $(".reduce").click(function (e) {
            //数字减少
            $(this).next().val(Number($(this).next().val()) - 1);
            //重新计算
            // call():调用函数,改变this指向
            anew.call($(this).next().get(0));
        });
        // amount-box  加减号的父元素盒子
        $('.amount-box input').change(function (e) {
            //重新计算
            anew.call(this);
        });
        // 计算加减价格
        function anew() {
            //判断值是否小于等于1
            // console.log($(this));
            if ($(this).val() <= 1) {
                $(this).prev().prop('disabled', 'disabled');
                $(this).val(1);
            }
            //获取个数
            var count = Number(this.value);
            console.log(this.value);
            //获取单价
            // class="price" 价格
            var price = Number($(this).parents('.cart-lists').find('.price').text());
            //求总价
            var sum = count * price;
            //设置总价                        
            $(this).parents('.cart-lists').find('.price-sum').text(sum);

            Father();

        }

        function Father() {
            //求个数
            var sum = 0;
            var total = 0;
            //遍历所有选中的标签
            $('input.son-check:checked').each(function (index, ele) {
                //求和        cart-lists 购物车父元素 ul     amount-box加减号的父元素盒子
                sum += Number($(this).parents('.cart-lists').find(".amount-box>input").val());
                //求总价                           price-sum 红色价格
                total += Number($(this).parents('.cart-lists').find(".price-sum").text());
            });
            //设置数量
            // 已选择的商品buy-num 0
            $('.buy-num').text(sum);
            // 总价 pay-price
            $(".pay-price").text(total);

            // console.log($('input.son-check').length == $('input.son-check:checked').length);
            // console.log($('input.son-check:checked').length);
            //判断是否全部选中              son-check 输入框

            if ($('input.son-check').length == $('input.son-check:checked').length) {
                $('input[type=checkbox]').prop("checked", true);
                $("label").addClass('active');
            } else {
                // whole-check 全选
                $('.whole-check').prop("checked", false);
                $('.whole-check').next().removeClass('active');
            }

            // 店铺下面的点击事件 点击子元素让父元素选中
            //遍历所有的商铺内容
            $(".shop-check").each(function (index, ele) {

                console.log($(ele).parents('.cart-box').find(".son-check").length);
                console.log('length:', $(ele).parents('.cart-box').find(".son-check:checked").length);
                //去判断选中的个数是否和商品的个数相同      
                // cart-box 店铺内容
                // son-check input
                // console.log($(ele));
                if ($(ele).parents('.cart-box').find(".son-check").length == $(ele).parents('.cart-box').find(".son-check:checked").length) {
                    $(ele).prop("checked", true);
                    $(ele).next().addClass('active');
                } else {
                    $(ele).prop("checked", false);
                    $(ele).next().removeClass('active');
                }
            });

        }

        $('.cart-dele').click(function () {
            // cart - lists 购物车父元素 ul
            var Cells = $(this).parents('.cart-lists');
            if (Cells.parent().children().length == 1) {

                Cells = $(this).parents('.cart-box');
            };
            //modal-box 包含删除最大的大盒子
            $('.modal-box').css('display', 'block');

            $('.ok').click(function () {
                $('.modal-box').css('display', 'none');
                //remove 直接删除本身、
                Cells.remove();
                $("#whole").removeClass('active');
                Father();
            });
            // close 取消按钮
            $('.close').click(function () {
                $('.modal-box').css('display', 'none');
            })
        });
        $('.zhifufuf').click(function () {
            $('.i_avatar_box').css('display', 'block')
            $('.i_menbu').css('display', 'block')
        })
        $('.xiaoshi').click(function () {
            $('.i_avatar_box').css('display', 'none')
            $('.i_menbu').css('display', 'none')
        })



    </script>
</body>

</html>